<template>
  <div>
    <div class="main_bd">
      <router-view />
    </div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
        <!-- <van-tabbar-item replace to="/car" icon="cart-o">购物车</van-tabbar-item> -->
      <van-tabbar-item replace to="/my" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const active = ref(0)

const onChange = (data)=>{
    console.log(data,'onChange');
}

onBeforeMount(() => {
  const val = route.path
  if (val === '/') {
    active.value = 0
  } else if (val === '/my') {
    active.value = 1
  }else {
    active.value = 2
  }
})
</script>

<style lang="less" >
.main_bd{
    padding-bottom: var(--van-tabbar-height);
}
</style>
